
/**
 * 实现思路：
 * 创建2个函数，direct判断进入离开的方向
 *            mouseEvent控制遮罩层的展示消失
 * 然后通过主函数调用这俩函数
 * 
 * 
 * 代码描述：根据鼠标划入方向，变换遮罩动画代码背景色页可换成图片，
 * 只需将li下面的div换成img即可，可直接复用div的class样式。
 * li中a标签可添加自己所需的链接地址。
 * 
 * 相关jQuery方法解释：
 * 
 * 1.each 遍历一个jQuery对象，为每个匹配元素执行一个函数。
 * .each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。
 * 每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。
 * 更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。
 * 
 * 2.on   在选定的元素上绑定一个或多个事件处理函数。
 * 
 * 
 */
 


$("#container li").each(function() {
  $(this).on('mouseenter', function(e) { //当鼠标移入元素对象边界内时，激活mouseenter事件。(不会冒泡）
                                          //console.log(e)    事件对象                                          
      var e = e || window.event;
      var angle = direct(e, this)         //console.log(this)   当前li
                                          //direct应该是获取位置用的吧,然后通过位置，判断是从哪个方向进入的
      mouseEvent(angle, this, 'in')
  })
  $(this).on('mouseleave', function(e) { //当鼠标移出元素对象边界内时，激活mouseleave事件。(不会冒泡)
      var e = e || window.event;
      var angle = direct(e, this)
      mouseEvent(angle, this, 'off')
  })
})

function direct(e, o) {               //e，o分别是事件对象和dom li
  var w = o.offsetWidth;              //offsetWidth 水平方向 width + 左右padding + 左右border-width
                                      //就是当前元素的宽高
  var h = o.offsetHeight;             //offsetHeight 垂直方向 height + 上下padding + 上下border-width
  var top = o.offsetTop;              //包含滚动条滚动的部分    获取当前元素到 定位父节点 的top方向的距离
                                      //它返回当前元素相对于其 offsetParent 元素的顶部的距离
                                      //console.log(top)
  var left = o.offsetLeft;            //获取当前元素到 定位父节点 的left方向的距离
  var scrollTOP = document.body.scrollTop || document.documentElement.scrollTop;
                                      //console.log(scrollTOP)
  var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
                                      //console.log(scrollLeft)
  var offTop = top - scrollTOP;
  var offLeft = left - scrollLeft;
  //console.log(offTop+";"+offLeft)
  //e.pageX|| e.clientX;
  //pageX 是从页面0 0 点开始  clientX是当前可视区域0 0开始  即当有滚动条时clientX  小于  pageX
  //ie678不识别pageX
  //PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度
  var ex = (e.pageX - scrollLeft) || e.clientX;
  var ey = (e.pageY - scrollTOP) || e.clientY;
  var x = (ex - offLeft - w / 2) * (w > h ? (h / w) : 1);
  var y = (ey - offTop - h / 2) * (h > w ? (w / h) : 1);

  var angle = (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4 //atan2返回的是弧度 atan2(y,x)
  var directName = ["上", "右", "下", "左"];
  return directName[angle]; //返回方向  0 1 2 3对应 上 右 下 左
}

function mouseEvent(angle, o, d) { //方向  元素  鼠标进入/离开

  var w = o.offsetWidth;
  var h = o.offsetHeight;

  if (d == 'in') {
      switch (angle) {
          case '上':
              $(o).find("p").css({
                  left: 0,
                  top: -h + "px"
              }).stop(true).animate({
                  left: 0,
                  top: 0
              }, 300)
              setTimeout(function() {
                  $(o).find("p a").css({
                      left: '50%',
                      top: -h + "px"
                  }).stop(true).animate({
                      left: '50%',
                      top: '20px'
                  }, 300)
              }, 200)
              break;
          case '右':
              $(o).find("p").css({
                  left: w + "px",
                  top: 0
              }).stop(true).animate({
                  left: 0,
                  top: 0
              }, 300)
              setTimeout(function() {
                  $(o).find("p a").css({
                      left: w + "px",
                      top: '20px'
                  }).stop(true).animate({
                      left: '50%',
                      top: '20px'
                  }, 300)
              }, 200)
              break;
          case '下':
              $(o).find("p").css({
                  left: 0,
                  top: h + "px"
              }).stop(true).animate({
                  left: 0,
                  top: 0
              }, 300)
              setTimeout(function() {
                  $(o).find("p a").css({
                      left: '50%',
                      top: h + "px"
                  }).stop(true).animate({
                      left: '50%',
                      top: '20px'
                  }, 300)
              }, 200)
              break;
          case '左':
              $(o).find("p").css({
                  left: -w + "px",
                  top: 0
              }).stop(true).animate({
                  left: 0,
                  top: 0
              }, 300)
              setTimeout(function() {
                  $(o).find("p a").css({
                      left: -w + "px",
                      top: '20px'
                  }).stop(true).animate({
                      left: '50%',
                      top: '20px'
                  }, 300)
              }, 200)
              break;
      }
  } else if (d == 'off') {
      switch (angle) {
          case '上':
              $(o).find("p a").stop(true).animate({
                  left: '50%',
                  top: -h + "px"
              }, 300)
              setTimeout(function() {
                  $(o).find("p").stop(true).animate({
                      left: 0,
                      top: -h + "px"
                  }, 300)
              }, 200)
              break;
          case '右':
              $(o).find("p a").stop(true).animate({
                  left: w + "px",
                  top: '20px'
              }, 300)
              setTimeout(function() {
                  $(o).find("p").stop(true).animate({
                      left: w + "px",
                      top: 0
                  }, 300)
              }, 200)
              break;
          case '下':
              $(o).find("p a").stop(true).animate({
                  left: '50%',
                  top: h + "px"
              }, 300)
              setTimeout(function() {
                  $(o).find("p").stop(true).animate({
                      left: 0,
                      top: h + "px"
                  }, 300)
              }, 200)
              break;
          case '左':
              $(o).find("p a").stop(true).animate({
                  left: -w + "px",
                  top: '20px'
              }, 300)
              setTimeout(function() {
                  $(o).find("p").stop(true).animate({
                      left: -w + "px",
                      top: 0
                  }, 300)
              }, 200)
              break;
      }
  }
}